<template>
  <devicePanel
    :panel-data="panelData"
    :common-type="deviceInfo.commonType"
    :sn="deviceInfo.serialNumber"
    :groupId="deviceInfo.groupId"
    :productClass="deviceInfo.productClass"
    :select-port="portselect"
    @childSelectPort="handelSelectPort"
    class="firewall-panel"
    ref="firewallPanel"
  >
    <template slot="legend">
      <div class="firewall-legend">
        <div class="legend-item">
          <div style="position: relative; padding: 0px 4px">
            <icon-font
              :type="'ic-port-electric'"
              :rotate="0"
              :style="{ fontSize: '18px' }"
              :class="['port-icon']"
            />
            <div style="pointer-events: none">
              <div class="status-icon">R</div>
            </div>
          </div>
          <div>{{ $t('deviceDetail.routerport') }}</div>
        </div>
        <div class="legend-item">
          <div style="position: relative; padding: 0px 4px">
            <icon-font
              :type="'ic-port-electric'"
              :rotate="0"
              :style="{ fontSize: '18px' }"
              :class="['port-icon']"
            />
            <div style="pointer-events: none">
              <div class="status-icon">B</div>
            </div>
          </div>
          <div>{{ $t('deviceDetail.touMingwan') }}</div>
        </div>
        <div class="legend-item">
          <div style="position: relative; padding: 0px 4px">
            <icon-font
              :type="'ic-port-electric'"
              :rotate="0"
              :style="{ fontSize: '18px' }"
              :class="['port-icon', 'black']"
            />
            <div style="pointer-events: none">
              <div :class="['edited', 'c-edited']"></div>
            </div>
          </div>
          <div>{{ $t('speedMultiOut.getset') }}</div>
        </div>
        <div class="legend-item">
          <div style="position: relative; padding: 0px 4px">
            <icon-font
              :type="'ic-port-electric'"
              :rotate="0"
              :style="{ fontSize: '18px' }"
              :class="['port-icon']"
            />
            <div style="pointer-events: none">
              <div :class="['edited']"></div>
            </div>
          </div>
          <div>{{ $t('wanMultiOut.noconfig') }}</div>
        </div>
        <div class="legend-item"><firewall-legend></firewall-legend></div>
      </div>
    </template>
    <template slot="ports" slot-scope="{ port, index }">
      <div
        style="position: relative; padding: 0px 4px"
        ondragstart="return false;"
      >
        <icon-font
          :type="getDevicePanelPortIcon(port.mediumType)"
          :rotate="index % 2 == 0 ? 0 : 180"
          :style="{ fontSize: '24px' }"
          :class="['port-icon', getPortSpeed(port)]"
        />
        <div style="pointer-events: none">
          <icon-font
            v-for="item in getPortOver(port)"
            :key="item"
            :type="'ic-port-' + item"
            class="over-icon"
          />
          <!-- <icon-font
                v-for="item in getPortStatus(port)"
                :key="item"
                :type="'ic-port-' + item"
                class="status-icon"
              /> -->
          <div
            class="status-icon"
            v-for="item in getPortStatus(port)"
            :key="item"
          >
            {{ item }}
          </div>
          <div :class="['edited', isEdit(port)]"></div>
        </div>
      </div>
    </template>
  </devicePanel>
</template>
<script>
import {
  getDevicePanelLayout, // 获取设备面板布局
  greenSpeed,
  getDevicePanelPortIcon,
} from '@utils/deviceTools';
import { devicePanel } from '@components';
import { mapState } from 'vuex';
import firewallLegend from './firewallLegend.vue';
export default {
  name: 'FirewallPanel',
  props: {
    deviceInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    portselect: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      panelData: [],
    };
  },
  components: {
    devicePanel,
    'firewall-legend': firewallLegend,
  },
  computed: {
    ...mapState('DeviceDetail', {
      portsMap: (state) => {
        const portsData = state.firewall.currentDevicePortsData;
        const map = {};
        portsData.forEach((item) => {
          if (!item.isSub) {
            map[`1_${item.slot}_${item.port}`] = item;
          }
        });
        return map;
      },
    }),
  },
  mounted() {
    this.initPanel();
  },
  watch: {
    deviceInfo: {
      async handler() {
        await this.initPanel();
      },
      deep: true,
    },
  },
  methods: {
    getDevicePanelPortIcon,
    /**
     * @description: 设备面板数据
     * @param {*} data
     */
    async initPanel() {
      const slotsLayout = await getDevicePanelLayout(
        this.deviceInfo.serialNumber,
        this.deviceInfo.productClass,
        this.$store
      );
      this.panelData = slotsLayout;
    },
    getPortSpeed(port) {
      const currentPort = this.portsMap[port.portorder];
      if (currentPort) {
        if (currentPort.enabled) {
          if (currentPort.speed == 'unknown') {
            return 'black';
          } else if (
            currentPort.operStatus &&
            greenSpeed.indexOf(currentPort.speed) > -1
          ) {
            return 'green';
          } else if (currentPort.operStatus) {
            return 'yellow';
          }
        } else {
          return 'disbaled';
        }
      } else {
        return '';
      }
    },
    getPortOver(port) {
      const overIcon = [];
      const currentPort = this.portsMap[port.portorder];

      if (currentPort && currentPort.wanlan != 'LAN') {
        overIcon.push('wan');
      }

      return overIcon;
    },
    getPortStatus(port) {
      const currentPort = this.portsMap[port.portorder];
      const portStatus = [];
      if (currentPort) {
        if (currentPort.workingMode == 'ROUTE') {
          portStatus.push('R');
        } else {
          portStatus.push('B');
        }
      }
      return portStatus;
    },
    isEdit(port) {
      const currentPort = this.portsMap[port.portorder];

      if (currentPort && currentPort.edted) {
        return 'c-edited';
      } else {
        return '';
      }
    },
    handelSelectPort({ selectPorts }) {
      if (selectPorts.length > 0) {
        const currentSelectPortOrder = selectPorts[0]; //单选只选择第一个
        this.$emit('selectPort', currentSelectPortOrder);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.firewall-panel {
  /deep/ .port {
    padding: 3px 5px;
  }
}
.port-icon {
  color: @portBlack;
  & + div {
    .over-icon {
      color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
    }
  }
  & + div {
    .status-icon {
      color: @portBlack;
      border-color: @portBlack;
    }
    .c-edited {
      border-color: @portBlack;
    }
  }
  &.black {
    color: @portBlack;
    & + div {
      .status-icon {
        color: @portBlack;
        border-color: @portBlack;
      }
      .c-edited {
        border-color: @portBlack;
      }
    }
  }
  &.green {
    color: @portGreen;
    & + div {
      .status-icon {
        color: @portGreen;
        border-color: @portGreen;
      }
      .c-edited {
        border-color: @portGreen;
      }
    }
  }
  &.yellow {
    color: @portYellow;
    & + div {
      .status-icon {
        color: @portYellow;
        border-color: @portYellow;
      }
      .c-edited {
        border-color: @portYellow;
      }
    }
  }
  &.red {
    color: @portRed;
  }
  &.disbaled {
    color: @portDisabled;
    & + div {
      .status-icon {
        color: @portDisabled;
        border-color: @portDisabled;
      }
      .c-edited {
        border-color: @portDisabled;
      }
    }
  }
}

.status-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #595959;
  color: #595959;
  text-align: center;
  line-height: 16px;
  background-color: #fff;
  z-index: 2;
  bottom: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  transform: scale(0.75);
}
.edited {
  border-bottom: 2px solid transparent;
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
}

.firewall-legend {
  display: flex;
  justify-content: flex-end;
  padding: 0px 20px;
  .legend-item {
    display: flex;
    font-size: 12px;
    margin-left: 12px;
  }
}
</style>
